import React, { Component } from "react";
import axios from "axios";
import Pts from "prop-types";

class Captcha extends Component {
  // 在子组件中对父组件的传给当前组件的参数进行类型限制 使用 prop-types这个模块
  // 步骤1: 引入import Pts from 'prop-types'
  // 步骤2: 使用静态属性的形式限制
  static propTypes = {
    // key: value
    getKey: Pts.func.isRequired,
  };

  // 默认的属性宽和高 设置验证码大小的
  static defaultProps = {
    w: 140,
    h: 40,
  };

  state = {
    imgUrl: "", // 初始数据
  };
  render() {
    return (
      <div onClick={this.loadRefresh}>
        <img
          src={this.state.imgUrl}
          width={this.props.w + "px"}
          height={this.props.h + "px"}
        />
      </div>
    );
  }
  loadImg = () => {
    // 发起验证码请求
    axios
      .get("https://reactapi.iynn.cn/captcha/api/math")
      .then((res) => {
        console.log(res);
        // 将后台验证码返回的key 标识存在父组件的state对象上
        this.setState(
          {
            imgUrl: res.data.img,
          },
          () => {
            // 表示此时已经赋值成功
            this.props.getKey(res.data.key);
          }
        );
      })
      .catch((e) => {});
  };
  // 点击刷新验证码
  loadRefresh = () => {
    this.loadImg();
  };
  componentDidMount() {
    // 初始化请求验证码
    this.loadImg();
  }
}

export default Captcha;
